<template>
  <div class="check-role">
    <Input search enter-button @on-search="serachTableData" placeholder="请输入角色名称" class="search-input"/>
    <div class="role-content">
      <Table class="table-content" height="520" border :columns="columns" :data="tableData" @on-select="onSelect" @on-select-cancel="onSelectCancel"
             @on-select-all="onSelectAll" @on-select-all-cancel="onSelectAllCancel"></Table>
    </div>
    <div class="modal-page">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            size="small"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <div class="modal-btn">
      <Button @click="closeModal">取消</Button>
      <Button type="primary" @click="sureRole">确定</Button>
    </div>
  </div>
</template>

<script>
import * as API from "@/api/sys-role.js";

export default {
  name: "check-role",
  props:{
    isSingle:{
      type:Boolean,
      default:false
    },
    checkedArr:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return{
      chooseRole: {
        id:""
      },
      page:{
        total:0,
        current:1,
        size:10
      },
      tableData:[],
      tempArr:[],
    }
  },
  computed:{
    columns(){
      let columnArr = [
        {
          title: '角色名称',
          key: 'roleName'
        },
        {
          title: '角色类型',
          key: 'roleType',
          render: (h, params) => {
            return h('span', params.row.roleType === "1" ? "分组角色" : "通用角色");
          }
        },
        {
          title: '备注',
          key: 'remark'
        },
      ]
        columnArr.unshift(this.isSingle?{
          title: '选择',
          width: 60,
          align: 'center',
          render: (h, params) => {
            let  flag = this.chooseRole.id === params.row.id;
            const that = this
            return h('div', [
              h('Radio', {
                props: {
                  value: flag
                },
                on: {
                  'on-change': () => {
                    that.chooseRole =  params.row;
                  }
                }
              })
            ])
          }
        }:{
          type: 'selection',
          width: 60,
          align: 'center'
        })
      return columnArr
    }

    ,
  },
  methods:{
    //获取表格数据
    getTableData(){
      API.getRoleList({
        page:{
          current:this.page.current,
          size:this.page.size
        },
        roleName:this.searchName
      }).then( res =>{
        if (res.code==="0"){
          this.page.total = parseInt(res.data.total)
          if (this.tempArr){
            this.tempArr.forEach(item => { // 判断本页数据状态
              res.data.records.forEach(e => {
                if (item.id === e.id) {
                  e['_checked'] = true
                }
              })
            })
          }
          this.tableData = res.data.records
        }
      })
    },
    pageChange(page){
      this.page.current = page
      this.getTableData()
    },
    sizeChange(size){
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },
    onSelect (selection, row) {
      this.tempArr.push(row) // 将该条数据添加到tempArr中
      this.tableData.forEach(item => { // 本页数据中找到该条勾选数据并添加属性_checked = true
        if (item.id === row.id) {
          item['_checked'] = true
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @param {*} row 刚取消选择的项数据
     * @description 取消table某一项时触发
     */
    onSelectCancel (selection, row) {
      this.tempArr.forEach((item, index) => { // tempArr中找到该条数据并删除
        if (row.id === item.id) {
          this.tempArr.splice(index, 1)
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @description table全选时触发
     */
    onSelectAll (selection) {
      selection.forEach(item => { // 将本页全部勾选添加到tempArr中
        this.tempArr.push(item)
      })
      this.tempArr = Array.from(new Set(this.tempArr)) // 去重
    },

    /**
     * @param {*} selection 已选项数据
     * @description table取消全选时触发
     */
    onSelectAllCancel (selection) {
      this.tableData.forEach(item => { // tempArr中找到该条数据并删除
        this.tempArr.forEach((e, index) => {
          if (item.id === e.id) {
            this.tempArr.splice(index, 1)
          }
        })
      })
    },

    //搜索
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTableData()
    },


    //关闭弹窗
    closeModal(){
      this.$emit("close-modal")
    },

    //关闭弹窗
    sureRole(){
      let returnData ;
      if (this.isSingle){
        if (this.chooseRole&&this.chooseRole.id){
          returnData = this.chooseRole
        }else{
          this.$Message.warning("请选择角色！")
          return
        }
      }else{
        if (this.tempArr&&this.tempArr.length>0){
          returnData = this.tempArr
        }else{
          this.$Message.warning("请选择角色！")
          return
        }
      }
      this.$emit("sure-back",returnData)
    }
  },
  created() {
    if (this.checkedArr){
      this.tempArr = this.checkedArr
    }
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
.check-role{
  .role-content{
    height: 525px;
    overflow: auto;
    margin: 10px 0px 10px 0px;
  }
  .modal-page{
    left: 100px;
    bottom: -10px;
    width: 100%;
    height: 50px;
    text-align: center;
  }
}
</style>
